<template>
  <div class="form-container">
    <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item prop="temp_title" label="模板名称">
        <el-input v-model="form.temp_title" placeholder="最多输入50个字符" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="line">
          <el-button size="mini" @click="onCancel">取消</el-button>
          <el-button size="mini" type="primary" @click="onSubmit" :loading="loading">确定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    loading: Boolean,
    defaultTitle: String,
    editMode: String,
  },
  data() {
    return {
      form: {
        temp_title: '',
      },
      rules: {
        temp_title: [{ required: true, message: '请填写模板名称', trigger: 'blur' }],
      },
    }
  },
  computed: {},
  mounted() {
    if (this.editMode === 'add') {
      this.form.temp_title = ''
    } else if (this.editMode === 'edit') {
      this.form.temp_title = this.defaultTitle
    } else if (this.editMode === 'copy') {
      this.form.temp_title = this.defaultTitle + '副本'
    }
  },
  methods: {
    // 保存
    onSubmit() {
      this.$refs.form.validate((flag) => {
        if (flag) {
          this.$emit('submit', this.form.temp_title)
        }
      })
    },
    // 取消
    onCancel() {
      this.$emit('close')
    },
  },
}
</script>
<style lang="scss" scoped>
.form-container {
  padding: 0 24px;
}

.line {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
